
<template>
  <router-view></router-view>
  <div class="fullscreen" @click="fullScreen">
    <img src="@/images/full.png" alt="">
  </div>
</template>
<script setup >
// 自适应
function resize() {
  let fs = document.body.clientWidth / 75;

  if (fs > 16) { // 控制字体大小，以免过大过小
    fs = 16;
  } else if (fs < 14) {
    fs = 14;
  }
  // 👇注意这里不能直接document.body.style
  document.body.parentNode.style = "font-size: " + fs + "px;";
}
resize();
const fullScreen = async () => {
    var de = document.querySelector('body');
    if (de.requestFullscreen) {
        await de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        await de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        await de.webkitRequestFullScreen();
    }
}
const exitFullScreen = () => {
    const func =
        document.exitFullScreen ||
        document.mozCancelFullScreen ||
        document.webkitExitFullscreen ||
        document.msExitFullscreen;
    func.call(document);
}
// window.onresize = resize;
</script>

<style scoped>
* {
  color: #fff;
  font-weight: 600;
  cursor: -webkit-image-set(url(https://www.lenscup.top/img/mouse.svg) 2x) ,default;
}
.logo.vue:hover {
  /* 模糊效果 */
  filter: drop-shadow(0 0 2em #42b883aa);
}
.fullscreen{
  position: fixed;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  color: #fff;
  z-index: 9999;
  cursor: pointer;
}
.fullscreen img{
  width:100%;
  object-fit: contain;
}
</style>
